<template>
	<view class="bottom-tab">
		<view class="bottom-tab-item-sider" @tap.stop="changeTap(item)" v-for="(item,index) in tabListParent" :key="index">
			<image v-if="curTab==item.id" class="first-img" :src="item.imgOn"></image>
			<image v-if="curTab!=item.id" class="first-img" :src="item.imgOff"></image>
			<text :class="curTab==item.id?'text-position text-on':'text-position'">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"wyg-bottom-tab-withcenter",
		props:{
			tabIndex: {
				//图片的尺寸
				type: String,
				default: "1"
			},
			tabListParent:{
				type:Array,
				default(){
				    return [
				{ id: 1, name: '首页', imgOff: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/newTab/home.png', imgOn: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/newTab/home_select.png', url: '/pages/center/ai' },
				{ id: 2, name: '商城', imgOff: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/newTab/business.png', imgOn: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/newTab/business_select.png', url: '/pages/saasShop/equity' },
				{ id: 3, name: '任务', imgOff: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/newTab/rewu_select.png', imgOn: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/newTab/rewu.png', url: '/pages/center/center' },
				{ id: 4, name: '课程', imgOff: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/newTab/kecheng_select.png', imgOn: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/newTab/kecheng.png', url: '/pages/center/cart' },
				{ id: 5, name: '消息', imgOff: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/newTab/news.png', imgOn: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/newTab/news_select.png', url: '/pages/center/user_chat/news_list' },
				{ id: 6, name: '我的', imgOff: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/newTab/mine.png', imgOn: 'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/newTab/mine_select.png', url: '/pages/center/user' }
			]
				}
			}
		},
		data() {
			return {
				curTab:1,
				is_curr:false
			}
		},
		created(){
			this.curTab=new Number(this.tabIndex);
		},
		onShow() {
			this.curTab=new Number(this.tabIndex);
		},
		methods: {
			$redirect(_url){
				if(this.is_curr){
					return;
				}
				uni.reLaunch({
					"url":_url
				})
			},
			changeTap(e){
				if(e.id==this.curTab){
					return;
				}
				this.$emit('select_click', (res)=>{
					// let param=new Number(res);
					// if(param==this.curTab){
					// 	this.is_curr = true;
					// }else{
					// 	this.is_curr = false;
					// }
					// this.curTab=e.id;
					this.$redirect(e.url);
				});
			}
			
		}
	}
	
</script>

<style lang="scss">
	.bottom-tab{
		position: fixed;
		z-index: 3000;
		// background-image: url(https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/tab.png);
		background-color: #F7F6F6;
		bottom: 0%;
		left:0%;
		width: 100%;
		height: 120upx;
		display: flex;
		align-items:center;
		justify-content:space-between;
		.bottom-tab-item-center{
			width: 24%;
			display: flex;
			flex-direction: column;
			align-items:center;
			justify-content:center;
			margin-top: -40upx;
			.first-img{
				width: 100upx;
				height: 100upx;
				margin-top: -0.8rem;
				
				border-radius: 50%;
			}
			.text-position{
				margin-top: 0rem;
				font-size: 0.6rem;
				color: #757575;
			}
			.text-on{
				color: #b49828;
			}
			
		}
		.bottom-tab-item-sider{
			width: 15%;
			display: flex;
			flex-direction: column;
			align-items:center;
			justify-content:center;
			.first-img{
				width:46upx;
				height: 46upx;
			}
			.text-position{
				margin-top: 12upx;
				font-size: 0.6rem;
				color: #757575;
			}
			.text-on{
				color:  #F7992B;
			}
			
		}

		
	}
	
</style>
